<template>
	<view class="page-wrap">
		<StyleVideo :poster="detail.dataHumanSucceedImage" :src="detail.dataHumanVideo" :progress="detail.progress" :msg="loadingTxt" />
		<view class="bg">
			<view class="bg-center fboxCol Ycenter">
				<view class="info-wrap">
					<view class="fboxRow Yend">
						<view class="fboxCol flex1">
							<view class="name font36 font-weight">{{detail.realName}}</view>
							<view class="industry font24">{{detail.industry}}</view>
						</view>
						<view class="code fboxCol Ycenter Xcenter" @tap="pageTo('qrcode')">
							<!-- <qrcode canvasId="detail" :size="50" /> -->
							<image class="qrCode" :src="detail.codeUrl" mode=""></image>
							<view class="tit font24">名片码</view>
						</view>
					</view>
					<view class="btn-group font28 fboxRow Ycenter Xcenter">
						<view class="btn fboxRow Ycenter Xcenter" @tap="shareSystem"><text class="bnxcxfont bnxcx-a-ziyuan18fenxiang mr6"></text>分享名片</view>
						<view class="btn fboxRow Ycenter Xcenter" @tap="pageTo('poster')"><text class="bnxcxfont bnxcx-a-ziyuan19mingpianma mr6"></text>{{isMine ? '我' : 'TA'}}的海报</view>
					</view>
				</view>
				<view class="intr-wrap font24 fboxCol Ycenter Xcenter"> 
					<view>3000万人已制作，</view>
					<view>2023商务人士都选择的闹元宵方式</view>
				</view>
			</view>
			<view class="bg-bottom"></view>
			<view class="fixed-space" v-if="detail && detail.progress == '100%' || !isMine"></view>
			<view class="fixed-bottom fboxRow Ycenter Xcenter">
				<template v-if="isMine">
					<view class="fixed-btn fboxRow Ycenter Xcenter font32 font-white bg-F9741B-FF3D15" v-if="detail.isFail" @tap="anewtap">重新制作数字人名片</view>
					<view class="fixed-btn fboxRow Ycenter Xcenter font32 font-white bg-F9741B-FF3D15" v-else-if="detail && detail.progress == '100%'" @tap="anewtap">重新制作数字人名片</view>
				</template>
				<template v-else>
					<view class="fixed-btn fboxRow Ycenter Xcenter font32 font-white bg-F9741B-FF3D15" @tap="getMobile">制作我的数字人名片</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import StyleVideo from './style-video.vue';
	import { throttle } from '@/static/js/common.js';
	import {digitalPersonInfo, getCurrentInfo, getProgress, getAccomplish, getStyleList} from '@/api/card.js';
	export default {
		components:{
			StyleVideo
		},
		props:{
			memberId: {
				type:String,
				default: ''
			},
			isExist: {
				type:Boolean,
				default: false
			}
		},
		data() {
			return {
				isMobile: false,
				isCard: false,
				isUsr: false,
				videoContext: null,
				pause: false,
				muted: true,
				detail: {progress: ''},
				loadingTxt: '正在合成2',
				// memberId: '',
				isMine: false,
				timer: null,
				count: 1,
				tempVideo: '',
				// isExist: false
			}
		},
		mounted(){
			this.getInit()
		},
		destroyed() {
			clearInterval(this.timer)
		},
		methods: {
			getInit(){
				digitalPersonInfo({ memberId: this.memberId }).then(res=>{
					if(res.data){
						this.detail = res.data
						this.isUserMine()
					}else{
						this.detail = { progress: ''}
						uni.redirectTo({
							url: '/card/edit?id='+this.memberId
						});
					}
				})
			},
			isUserMine(){
				// 获取用户信息
				if (uni.getStorageSync('bw_user_temp')) {
					let value = JSON.parse(uni.getStorageSync('bw_user_temp'));
					if(value.memberId == this.detail.memberId){
						this.isMine = true
						if(this.detail.progress != '100%'){ 
							this.getProgress() 
						}
					}else{
						if(this.detail.progress != '100%'){
							this.loadingTxt = '对方正在制作中'
						}
						this.isMine = false
					}
				}else{
					if(this.detail.progress != '100%'){
						this.loadingTxt = '对方正在制作中'
					}
				}
				
			},
			async getProgress(){
				try {
					const progressRes= await getProgress({memberId: this.detail.memberId})
					this.detail.progress = progressRes.data.progress
					let text = ''
					if(progressRes.data.message){
						text = '('+progressRes.data.message+')'
					}
					if(progressRes.data.progress){
						this.loadingTxt = '正在合成'+progressRes.data.progress + text
					}else{
						this.loadingTxt = '正在制作中'
					}
					setTimeout(()=>{
						if(progressRes.data.isFail){
							// this.progress = ''
						}else if(this.detail.progress != '100%' ){
							this.getProgress()
						}else if(progressRes.code == 700100){
							this.getProgress()
						}else if(progressRes.data.progress == '100%'){
							this.saveMember()
						}
					},5000)
				} catch (e) {
					// error
					console.log(e)
				}
			},
			// 进度百分之百 调完成接口
			saveMember: throttle(function (event) {
				getAccomplish().then(res=>{
					if(res.data){
						this.getInit()
					}
				})
			}, 2000),
			pageTo(type){
				if(type == 'qrcode'){
					uni.navigateTo({url:'/card/qrcode?id='+this.memberId})
				}else if(type == 'poster'){
					uni.navigateTo({ url: '/mine/poster?id='+this.memberId })
				}				
			},
			async getMobile(){
				// #ifdef H5
				try {
					// 获取token
					if (uni.getStorageSync('bw_params')) {
						let token = JSON.parse(uni.getStorageSync('bw_params'));
						if (typeof(token.access_token) != "undefined") {
							// 根据token查询用户信息
							await getCurrentInfo().then(res=>{
								if(res.code == 0){
									try {
										uni.setStorageSync('user_info', JSON.stringify(res.data));
										if(res.data.progress == '100%'){
											uni.navigateTo({ url: '/CardDetail?id='+res.data.memberId+'&isExist='+res.data.existTemplate })
										}else{
											uni.navigateTo({ url: '/card/editDatahuman?id='+res.data.memberId+'&isExist='+res.data.existTemplate })
										}
									} catch (e) {
										// error
										console.log(e)
									}
								}						
							})
						}
					}else{
						// this.isMobile =true
						uni.navigateTo({ url: '/mine/mobile?type=detail&tmpTime='+(new Date().getTime()) })
					}
				} catch (e) {
					// error
					console.log(e)
				}
				// #endif
				// #ifdef MP
				console.log(1111111111)
				// #endif
			},
			anewtap(){
				uni.navigateTo({ url: '/card/editDatahuman?id='+this.memberId+'&edit=1' })
			},
			shareSystem(){
				uni.setClipboardData({
					data: window.location.href,
					showToast: false,
					success: function () {
						uni.showToast({
							icon: 'none',
							title: '分享地址已复制，去分享给朋友吧'
						})
						console.log('success');
					}
				});
			},
			mobileCallback(e){
				uni.redirectTo({
					url: '/card/editDatahuman?id='+e.memberId+'&edit=1'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	
		
	.video-box {
		position: relative;
		width: 750rpx;
		height: 664rpx;
		background: #6d0d12 url('https://ebc-prod.cdn.benwunet.com/datahuman/vip-newyear/video-bg3.jpg') repeat-y top center;
		background-size: 750rpx 664rpx;
	}
	.video-loading{
		position: relative;
		width: 750rpx;
		height: 664rpx;
		background-color: rgba(0,0,0,.5);
	}

	.video-box .video {
		position: relative;
		width: 750rpx;
		height: 664rpx;
		z-index: 0;
	}

	.video-box .video-veil {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		width: 750rpx;
		height: 664rpx;
	}
	.info-wrap{width: 533rpx; margin-top: -30rpx; }
	.info-wrap .name{color:#B03730}
	.info-wrap .industry{ margin-top: 40rpx; color:#D75D56}
	.info-wrap .job{margin-top: 20rpx; }
	.info-wrap .icon{margin-right: 12rpx; width: 32rpx;height: 32rpx;background-color: red;}
	.info-wrap .certification{margin-top: 40rpx;}
	.info-wrap .qrCode{width: 63rpx;height: 63rpx;}
	.info-wrap .code .tit{margin-top: 14rpx;color:#D75D56}
	
	.intr-wrap{ margin-top: 40rpx;width: 533rpx;height: 122rpx;
		background: url('https://ebc-prod.cdn.benwunet.com/uni-static/activity-year/bg-5.png') repeat-y top center;
		background-size: 533rpx 122rpx;
		color:#E56F54;line-height: 36rpx;}
	
	.btn-group{margin-top: 40rpx;}
	.btn-group .btn{width: 252rpx;height: 78rpx;
		background: url('https://ebc-prod.cdn.benwunet.com/uni-static/activity-year/bg-btn-1.png') repeat-y top center;
		background-size: 252rpx 78rpx;
		color:#C52E25;
		overflow: hidden;}
		.btn-group .btn+.btn{margin-left: 20rpx;}
	.btn-group .icon{margin-right: 11rpx; width: 36rpx;height: 36rpx;background-color: red;}

	
	.bg {
		padding-top: 186rpx;
		background: #c33620 url('https://ebc-prod.cdn.benwunet.com/uni-static/activity-year/bg.jpg') no-repeat top center;
		background-size: 750rpx auto;
		overflow: hidden;
	}
	
	.bg-center {
		background: url('https://ebc-prod.cdn.benwunet.com/uni-static/activity-year/bg-1.png') repeat-y top center;
		background-size: 750rpx auto;
		/* overflow: hidden; */
	}
	
	.bg-bottom {
		background: url('https://ebc-prod.cdn.benwunet.com/uni-static/activity-year/bg-2.png') no-repeat bottom center;
		width: 750rpx;
		height: 137rpx;
		background-size: 750rpx auto;
	}
	
	
	.fixed-space {
		height: 160rpx;
	}
	
	.fixed-bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		padding: 0;
	}
	
	.fixed-bottom .fixed-btn {
		background: #c33620 url('https://ebc-prod.cdn.benwunet.com/uni-static/activity-year/bg-btn.jpg') no-repeat top center;
		background-size: 750rpx auto;
		width: 750rpx;
		height: 160rpx;
		color: #fcddb7
	}
</style>
